<template>
  <div class="vir-echarts-page vir-fullscreen">
    <div class="vir-echarts-row">
      <div class="vir-echarts-item">
        <div ref="echarts0" style="height:100%;width:100%;"></div>
      </div>
      <div class="vir-echarts-item">
        <div ref="echarts1" style="height:100%;width:100%;"></div>
      </div>
    </div>
    <div class="vir-echarts-row">
      <div class="vir-echarts-item">
        <div ref="echarts2" style="height:100%;width:100%;"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import echarts from 'echarts/lib/echarts';
import { ECharts } from 'echarts';

import 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';

@Component
export default class EchartsPage extends Vue {
  private compEcharts0?: echarts.ECharts;
  private compEcharts1?: echarts.ECharts;
  private compEcharts2?: echarts.ECharts;

  get echarts0(): echarts.ECharts {
    return this.compEcharts0 as echarts.ECharts;
  }

  get echarts1(): echarts.ECharts {
    return this.compEcharts1 as echarts.ECharts;
  }

  get echarts2(): echarts.ECharts {
    return this.compEcharts2 as echarts.ECharts;
  }

  private mounted() {
    this.compEcharts0 = echarts.init(this.$refs.echarts0 as HTMLDivElement);
    this.compEcharts1 = echarts.init(this.$refs.echarts1 as HTMLDivElement);
    this.compEcharts2 = echarts.init(this.$refs.echarts2 as HTMLDivElement);

    // 加载数据
    this.$http.doGet('/api/data/echarts0.json').then((res: any) => {
      this.echarts0.setOption(res);
    });
    this.$http.doGet('/api/data/echarts1.json').then((res: any) => {
      this.echarts1.setOption(res);
    });
    this.$http.doGet('/api/data/echarts2.json').then((res: any) => {
      this.echarts2.setOption(res);
    });
  }
}
</script>
<style lang="scss" scoped>
.vir-echarts-page {
  .vir-echarts-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    .vir-echarts-item {
      flex: 1;
    }
  }
}
</style>
